<template>
	<div class="the-border-box">
		<div class="line1"></div>
		<div class="line2"></div>
		<slot></slot>
		<div class="line3"></div>
		<div class="line4"></div>
	</div>
</template>

<script></script>

<style lang="scss" scoped="scoped">
$borderColor:limegreen;
$borderSizeWidth:10px;
$borderSizeHeight:2px;
.the-border-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(4, 123, 83, 0.1);
	.line1::before {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeWidth;
		height: $borderSizeHeight;		
		left:0;	
		top:0;		
	}
	.line1::after {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeWidth;
		height: $borderSizeHeight;		
		right:0;	
		top:0;		
	}
	.line2::before {
		content: '';
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeHeight;
		height: $borderSizeWidth;		
		left: 0;	
		top:1px;		
	}
	.line2::after {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeHeight;
		height: $borderSizeWidth;		
		right: 0;	
		top:1px;
	}	
	.line3::before {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeHeight;
		height: $borderSizeWidth;		
		left: 0;	
		bottom:1px;		
	}
	.line3::after {
		content: '';	
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeHeight;
		height: $borderSizeWidth;		
		right: 0;	
		bottom:1px;
	}
	
	.line4::before {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeWidth;
		height: $borderSizeHeight;		
		left:0;	
		bottom:0;		
	}
	.line4::after {
		content: '';		
		position: absolute;		
		background-color: $borderColor;
		width: $borderSizeWidth;
		height: $borderSizeHeight;		
		right:0;	
		bottom:0;		
	}
}
</style>
